<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="b">
    <div class="row">
        <div class="col-md-9">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <i class="fa fa-eye"></i>&nbsp;博客详情 <span>（点击图片可查看原图）</span>
                        <a id="like1" href="javascript:like()" th:if="${blog.isLike==null}" class="status-icon hint--top" aria-label="点赞这篇博客" style="float: right;color: red">
                            <button id="likeButton" data-toggle="modal" data-target="#myModal">
                                <i id="i1" class="fa fa-thumbs-o-up"></i>
                            </button>
                        </a>
                        <a th:if="${blog.isLike==1}" class="status-icon  hint--top" aria-label="你已经点赞过这篇博客" style="float: right;color: blue">
                            <button>
                                <i class="fa fa-thumbs-up"></i>
                            </button>
                        </a>
                    </h3>
                </div>
                <div class="panel-body">
                    <h3 th:text="${blog.title}" style="text-align: center;font-size: 20px"></h3>
                    <p style="color: gray;text-align: center"><span
                            th:text="' 发布日期: '+${#dates.format(blog.releaseDate,'yyyy-MM-dd HH:mm:ss')}+' '"></span> |
                        <span th:text="' 阅读次数: '+${blog.click}+' '"></span> | 点赞数: <span
                                th:text="${blog.likeNum}"></span> | 所属类别:
                        <a th:href="${'/index?blogTypeId='+blog.blogType.id}" style="color: grey" class="status-icon hint--top" th:aria-label="${'查看分类：'+blog.blogType.name}"><span th:text="${blog.blogType.name}"></span></a></p>
                    <span th:utext="${blog.content}" style="line-height: 22px"></span>
                    <p style="text-align: right;color: grey" th:if="${blogLastClickTime!=null}">
                        本文上一次被查看时间&nbsp;:&nbsp;<span
                            th:text="${#dates.format(blogLastClickTime,'yyyy-MM-dd HH:mm:ss')}"></span></p>
                    <p style="text-align: center"><img th:src="@{/static/images/end.png}" id="img3" style="height: 55px"
                                                       alt=""></p>
                    <hr>
                    <span th:utext="${previousAndNextBlogCode}"></span>
                </div>
            </div>
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <i class="fa fa-comments-o"></i>&nbsp;评论信息
                        <span style="float: right">***评论审核通过后方可在下方显示***</span>
                    </h3>
                </div>
                <div class="panel-body">
                    <form>
                        <fieldset>
                            <textarea rows="4" class="form-control" id="commentContent" name="content"
                                      placeholder="请输入评论内容..."></textarea>
                            <input type="text" id="commentBlogId" hidden="hidden" th:value="${blog.id}">
                            <a href="javascript:submitComment()">
                                <button type="button" class="btn btn-primary btn11" style="margin-top: 8px;" data-toggle="modal" data-target="#myModal">立即提交
                                </button>
                            </a>
                        </fieldset>
                    </form>
                    <hr style="height:5px;border:none;border-top:2px dotted #1296db;" th:if="${commentList.size()>0}">
                    <div class="row" th:if="${commentList.size()>0}">
                        <div th:each="comment:${commentList}">
                            <div class="col-md-1">
                                <img class="img-rounded" th:src="@{'/static/images/userImage/'+${comment.imageName}}"
                                     alt="11">
                            </div>
                            <div class="col-md-11">
                                <p style="color: grey">评论时间: <span
                                        th:text="${#dates.format(comment.date,'yyyy-MM-dd HH:mm:ss')}"></span>&nbsp;&nbsp;&nbsp;&nbsp;评论人IP地址:
                                    <span th:text="${comment.ip}"></span></p>
                                <p th:text="${comment.content}" style="color: blue"></p>
                                <p th:if="${comment.reply!=null&&comment.reply!=''}">
                                    <img class="img-rounded" th:src="@{/static/images/userImage/me.png}" style="width: 5%" alt="">
                                    <span style="color: grey">&nbsp;站长回复：</span><span style="color: green" th:text="${comment.reply}" th:if="${comment.reply!=null}"></span></p>
                                <br>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <i class="fa fa-leaf"></i>&nbsp;博客推荐
                    </h3>
                </div>
                <div class="panel-body">
                    <div th:each="recommendBlog:${recommendBlogList}" th:if="${recommendBlogStat.count<=10}">
                        <p><a th:href="${'/blog/'+recommendBlog.id}"
                              th:text="${#strings.abbreviate(recommendBlog.title,18)}" style="text-decoration: none"
                              class="test status-icon  hint--left" th:aria-label="${'查看博客：'+recommendBlog.title}"></a></p>
                    </div>
                </div>
            </div>
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <i class="fa fa-th-large"></i>&nbsp;按类别分类
                    </h3>
                </div>
                <div class="panel-body">
                    <div th:each="blogType:${blogTypeList}">
                        <p><a th:href="${'/index?blogTypeId='+blogType.id}"
                              th:text="${blogType.name}" style="text-decoration: none" th:aria-label="${'查看分类：'+blogType.name}"
                              class="test status-icon  hint--left"></a><span class="label label-primary" th:text="${blogType.blogNum}"></span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <i class="fa fa-calendar"></i>&nbsp;按日期分类
                    </h3>
                </div>
                <div class="panel-body">
                    <div th:each="blogCount:${blogCountList}">
                        <p><a th:href="${'/index?releaseDateStr='+blogCount.releaseDateStr}"
                              th:text="${blogCount.releaseDateStr}" th:aria-label="${'查看分类：'+blogCount.releaseDateStr}"
                              style="text-decoration: none" class="test status-icon  hint--left"></a><span class="label label-primary"
                                                                                   th:text="${blogCount.blogCount}"></span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        来自 <span style="color: red">LeDao的博客</span> 的提示
                    </h4>
                </div>
                <div class="modal-body">
                    <strong id="blogDetailsModal" style="color: blue;font-size: 16px"></strong>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">关闭
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</div>

</body>
</html>